<!DOCTYPE html>
<html style="font-size:62.5%">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>欢瑞世纪影视传媒</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/animate.min.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/main.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate.min.js"></script>
		<script src="js/public.js"></script>
		<style>
			* {margin: 0;padding: 0;}
			html,body {height: 100%;}
			body {font-family: "microsoft yahei";}
			.swiper-container {width: 100%;height: 100%;}
			.swiper-slide {width: 100%;height: 100%;background-size: 100% 100%;}
			img {display: block;}
			.swiper-pagination-bullet {width: 6px;height: 6px;background: #fff;opacity: .4;}
			.swiper-pagination-bullet-active {opacity: 1;}
			@-webkit-keyframes start {
				0%,
				30% {opacity: 0;-webkit-transform: translate(0, 10px);}
				60% {opacity: 1;-webkit-transform: translate(0, 0);}
				100% {opacity: 0;-webkit-transform: translate(0, -8px);}
			}
			@-moz-keyframes start {
				0%,
				30% {opacity: 0;-moz-transform: translate(0, 10px);}
				60% {opacity: 1;-moz-transform: translate(0, 0);}
				100% {opacity: 0;-moz-transform: translate(0, -8px);}
			}
			@keyframes start {
				0%,
				30% {opacity: 0;transform: translate(0, 10px);}
				60% {opacity: 1;transform: translate(0, 0);}
				100% {opacity: 0;transform: translate(0, -8px);}
			}
			.ani {position: absolute;}
			.txt {position: absolute;}
			#array-left {position: absolute;z-index: 999;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg)!important;transform: rotate(90deg)!important;}
			#array {position: absolute;z-index: 999;-webkit-animation: start 1.5s infinite ease-in-out;}
			/*首页*/
			@font-face {
				font-family: 'SourceHanSansCN-Medium';
				src: url('fonts/SourceHanSansCN-Medium.otf');
			}
			.b-txt,.s-txt {font-family: SourceHanSansCN-Medium;font-size: 68px;color: #FFFFFF;letter-spacing: 0;text-shadow: 0 2px 0 #3855C3;}
			.about-txt {background: url("../images/begin_btn_go@3x.png");background-size: 100% 100%;font-family: SourceHanSansCN-Medium;font-size: 20px;color: #FFFFFF;letter-spacing: 0;line-height: 56px;text-indent: 30px;}
			.b-yuan {background: rgba(255, 255, 255, 0.50);}
			.m-yuan {background: rgba(255, 255, 255, 0.20);margin: 5px;}
			.m-yuan {background: rgba(255, 255, 255, 1);margin: 5px;}
			.swiper-slide {
				background-image: linear-gradient(-180deg, rgba(255, 61, 127, 0.80) 0%, #7295F4 98%);
				overflow: scroll;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<section class="swiper-wrapper">
				<!-------------slide1----------------->
				<section class="swiper-slide swiper-slide1 slide-v">
				</section>
				<section class="swiper-slide swiper-slide1 slide-v slide-last">
					<div class="view" style="width: 100%;  height: 100%;  position: relative;  overflow-y: scroll; -webkit-overflow-scrolling: touch; ">
					<div class="img-bg ani" swiper-animate-effect="slideInUp" swiper-animate-duration=".5s" swiper-animate-delay="0.5s">
						<img src="images/company.jpeg" alt="" style="width:100%;opacity: .1;height: 100%;">
					</div>
					<div class="company">
						<span class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s" swiper-animate-delay="0.5s"></span>
						<label class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="0.7s">公司介绍</label>
					</div>
					<div class="ani logo" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1s">
						<img src="images/logo-b.jpg" />
					</div>
					<div class="ani line-f" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.15s">
						<p></p>
					</div>
					<div class="words">
						<div class="ani mybox" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.2s"></div>
						<div class="ani boxbg" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.4s"></div>
						<p class="ani word" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">欢瑞世纪影视传媒股份有限公司注册成立于2006年，是一家致力于电影电视剧投资、制作、发行以及相关产业发展的公司。“品质是最好的表达”一直是公司制作的原则。</p>
					</div>
					<div class="ani line-s" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2s"></div>
					<div class="contain">
						<div class="ani workbox" swiper-animate-effect="bounceIn" swiper-animate-duration=".5s" swiper-animate-delay="2.5s"></div>
						<p class="ani single" style="left: 6.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.55s">旗</p>
						<p class="ani single" style="left: 6.9rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.6s">下</p>
						<p class="ani single" style="left: 7.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.65s">工</p>
						<p class="ani single" style="left: 8.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.7s">作</p>
						<p class="ani single" style="left: 9.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.75s">室</p>
					</div>
					<div class="ani line-t" style="top: 16.3rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.8s"></div>
					<div class="place">
						<div class="ani placebox" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.85s"></div>
						<!--唐嫣工作室-->
						<div class="ani placebg" style="left: 1.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.9s"></div>
						<p class="ani name" style="top: 17.9rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.95s">唐</p>
						<p class="ani name" style="top: 18.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3s">嫣</p>
						<p class="ani name" style="top: 19.7rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.05s">工</p>
						<p class="ani name" style="top: 20.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.1s">作</p>
						<p class="ani name" style="top: 21.5rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.15s">室</p>
						<!--明道工作室-->
						<div class="ani placebg" style="left: 4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.2s"></div>
						<p class="ani name" style="top: 17.9rem;left: 4.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.25s">明</p>
						<p class="ani name" style="top: 18.8rem;left: 4.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.3s">道</p>
						<p class="ani name" style="top: 19.7rem;left: 4.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.35s">工</p>
						<p class="ani name" style="top: 20.6rem;left: 4.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.4s">作</p>
						<p class="ani name" style="top: 21.5rem;left: 4.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.45s">室</p>
						<!--杜淳工作室-->
						<div class="ani placebg" style="left: 6.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.5s"></div>
						<p class="ani name" style="top: 17.9rem;left: 6.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.55s">杜</p>
						<p class="ani name" style="top: 18.8rem;left: 6.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.6s">淳</p>
						<p class="ani name" style="top: 19.7rem;left: 6.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.65s">工</p>
						<p class="ani name" style="top: 20.6rem;left: 6.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.7s">作</p>
						<p class="ani name" style="top: 21.5rem;left: 6.6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.75s">室</p>
						<!--何晟铭工作室-->
						<div class="ani placebg" style="left: 8.4rem;height: 6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.8s"></div>
						<p class="ani name" style="top: 17.9rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.85s">何</p>
						<p class="ani name" style="top: 18.8rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.9s">晟</p>
						<p class="ani name" style="top: 19.7rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="3.95s">铭</p>
						<p class="ani name" style="top: 20.6rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4s">工</p>
						<p class="ani name" style="top: 21.5rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.05s">作</p>
						<p class="ani name" style="top: 22.4rem;left: 8.8rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.1s">室</p>
						<!--贾乃亮工作室-->
						<div class="ani placebg" style="left: 10.6rem;height: 6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.15s"></div>
						<p class="ani name" style="top: 17.9rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.2s">贾</p>
						<p class="ani name" style="top: 18.8rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.25s">乃</p>
						<p class="ani name" style="top: 19.7rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.3s">亮</p>
						<p class="ani name" style="top: 20.6rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.35s">工</p>
						<p class="ani name" style="top: 21.5rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.45s">作</p>
						<p class="ani name" style="top: 22.4rem;left: 11rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.55s">室</p>
						<!--孙耀琦工作室-->
						<div class="ani placebg" style="left: 12.8rem;height: 6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.6s"></div>
						<p class="ani name" style="top: 17.9rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.65s">孙</p>
						<p class="ani name" style="top: 18.8rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.7s">耀</p>
						<p class="ani name" style="top: 19.7rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.75s">琦</p>
						<p class="ani name" style="top: 20.6rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.8s">工</p>
						<p class="ani name" style="top: 21.5rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.85s">作</p>
						<p class="ani name" style="top: 22.4rem;left: 13.2rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="4.9s">室</p>
					</div>
					<div class="contact">
						<div class="ani line-e" style="top: 24.3rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5s"></div>
					</div>
					<div class="contain">
						<div class="ani workbox" style="top: 25.2rem;" swiper-animate-effect="bounceIn" swiper-animate-duration=".5s" swiper-animate-delay="5.5s"></div>
						<p class="ani single" style=" top: 25.4rem; left: 6.5rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.55s">联</p>
						<p class="ani single" style="top: 25.4rem;left: 7.3rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.6s">系</p>
						<p class="ani single" style="top: 25.4rem;left: 8.1rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.65s">我</p>
						<p class="ani single" style="top: 25.4rem;left: 8.9rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.7s">们</p>
					</div>
					<div class="ani line-t" style="top: 26.4rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.8s"></div>
					<div class="address">
						<div class="ani placebox" style="top:27.3rem;height: 6rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="5.9s"></div>
						<div class="icon ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="6.5s">
							<img src="images/profile_icon_location@3x.png" />
						</div>
						<p class="ani msg" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="6.6s">地址：北京市朝阳区光华路4号东方梅地亚中心a座27层</p>
						<div class="icon ani" style="top: 30.5rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="6.7s">
							<img src="images/profile_icon_phone@3x.png" />
						</div>
						<p class="ani msg" style="top: 30.5rem;" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="6.8s">电话：010-8571 8098</p>
						<div class="icon ani" style="top: 32rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="6.9s">
							<img src="images/profile_icon_message@3x.png" />
						</div>
						<p class="ani msg" style="top: 32rem;" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="7s">传真：010-8571 8098-8801</p>
					</div>
					<p class="ani footer" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="7.5s">Powered by</p>
					<p class="ani footer" style="left: 8.2rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="7.55s">娱丸APP</p>
					</div>
				</section>
			</div>
		</div>
		<script>
			//过了几秒后滚动
			function demoProcess() {
				$('.view').animate({
					scrollTop: '500px'
				}, 800);
				$('.slide-last').addClass('stop-swiping');
			}
			var mySwiper = new Swiper('.swiper-container', {
					direction: 'vertical',
					/*pagination: '.swiper-pagination',*/
					//virtualTranslate : true,
					//				mousewheelControl: true,
					noSwiping : true,
					noSwipingClass : 'stop-swiping',
					onInit: function(swiper) {
						swiperAnimateCache(swiper);
						swiperAnimate(swiper);
					},
					onSlideChangeEnd: function(swiper) {
						swiperAnimate(swiper);
						setTimeout(demoProcess, 5000);
					},
					onTransitionEnd: function(swiper) {
						swiperAnimate(swiper);
					},
					watchSlidesProgress: true,
					onProgress: function(swiper) {
						for (var i = 0; i < swiper.slides.length; i++) {
							var slide = swiper.slides[i];
							var progress = slide.progress;
							var translate = progress * swiper.height / 4;
							scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
							var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
							slide.style.opacity = opacity;
							es = slide.style;
							es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + translate + 'px,-' + translate + 'px) scaleY(' + scale + ')';
						}
					},
					onSetTransition: function(swiper, speed) {
						for (var i = 0; i < swiper.slides.length; i++) {
							es = swiper.slides[i].style;
							es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
						}
					},
				})
			
			var lastY;
				$(".view").bind("touchmove", function(e) {
					if ($(this).scrollTop() <= 0) {
						//超出顶部
						$('.slide-last').removeClass('stop-swiping');
					    var currentY = e.originalEvent.touches[0].clientY;
					    if(currentY > (lastY || 0)){
							
					    }else if(currentY < (lastY || 0)){
							e.stopPropagation();
					    }
					    lastY = currentY;
					}else if($(this).scrollTop() >= ($(this).children().height() - $(this).height())){
						//超出底部
						$('.slide-last').addClass('stop-swiping');
						var currentY = e.originalEvent.touches[0].clientY;
					    if(currentY > (lastY || 0)){
							e.stopPropagation();
					    }else if(currentY < (lastY || 0)){

					    }
					    lastY = currentY;
					}else{
						//在内容区域滑动
						e.stopPropagation();
					}
				});

		</script>
	</body>

</html>